<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/loading.css"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100%;
            height: 400px;
            background: white;
            box-shadow: 0px 0px 1px #777777;
            margin-top: 20px;
            border-radius: 4px;
        }

        .edit-input {
            width: 70%;
            height: 40px;
            line-height: 40px;
            align-content: center;
            margin-left: 50px;
            margin-top: 10px;
            padding-left: 10px;
            outline: none;
            border: 1px solid #eeeeee;
        }

        .edit-input:focus {
            border: 1px solid #00b38a;
        }

        .btn-submit {
            width: 70%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #11a984;
            margin-left: 50px;
            margin-top: 30px;
            cursor: pointer;
            color: white;
        }

        .btn-submit:hover {
            background: #00b38a;
        }

        #login{
            color: #00b38a;
            display: inline-block;
            margin-top: 10px;
            font-size: 16px;
            float: left;
            text-decoration: none;
        }
        #login:hover{
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div style="position: relative">
    <!--绿色背景-->
    <p style="position: absolute;background: #00b38a;height: 360px;width:100%;z-index: 0"></p>

    <div style="width: 35%;left:30%;top:90px;position: absolute;z-index: 1">
        <!--logo-->
        <img src="./drawable/logo_white.png" alt="logo" style="width: 120px;height: 40px">
        <!--登录框-->
        <div class="box">
            <h4 style="font-weight: normal;top: 50px;left: 50px;position: relative;color: #11a984">用户注册</h4>
            <h6 id="tip-error"
                style="display:block;color: red;top: 70px;left: 50px;position: relative;font-weight: normal;"></h6>
            <!--左边百分之60-->
            <div style="width: 60%;position: relative;top: 80px;float: left">
                <input id="username" class="edit-input" type="text" placeholder="请输入常用的手机号或邮箱" style="color: #777777">
                <h6 id="tip-user"
                    style="display:none;color: red;margin-left: 50px;font-weight: normal;margin-top: 10px">*
                    请输入手机号或邮箱</h6>
                <input id="password" class="edit-input" type="password" placeholder="请输入密码" style="color: #777777">
                <h6 id="tip-pwd" style="display:none;color: red;margin-left: 50px;font-weight: normal;margin-top: 10px">
                    * 请输入密码</h6>
                <h4 class="btn-submit" onclick="login()">注&nbsp册</h4>
                <h5 style="color: #777777;font-weight: normal;margin-left: 50px;margin-top: 10px">注册代表你已经同意<a href="#" style="color: #00b38a;text-decoration: none">[拉勾网用户协议]</a></h5>
            </div>
            <!--右边百分之40-->
            <div style="width: 40%;position: relative;top: 80px;float: left">
                <h4 style="font-weight: normal;color: #777777">已有账号：</h4>
                <a id="login" href="login.html">直接登录</a>
                <img style="float: left;width: 22px;height:22px;margin-left:5px;margin-top: 10px" src="./drawable/right_arrow.png" alt="arrow">
            </div>
        </div>
    </div>
</div>

<div id="loading"
     style="position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 5;display: none">
    <section class="main">
        <!-- the component-->
        <ul class="bokeh">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
</div>
<script type="text/javascript">
    /**
     * 用户注册
     */
    function login() {
        var user = $("#username").val();
        var password = $("#password").val();
        if (checkParams(user, password)) {
            loading(false);
            $.ajax({
                type: "POST",
                url: "/user",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(jsonParams(user,password)),
                dataType: "json",
                success: function (data) {
                    loading(true);
                    if (data.code == 0) {
                        window.location = "login.html";
                    } else {
                        $("#tip-error").text(data.message).css("display", "block");
                    }
                },
                error: function (message) {
                    loading(true);
                    $("#tip-error").text(message).css("display", "block");
                }
            });
        }
    }

    /**
     * 检查参数
     */
    function checkParams(user, password) {
        var inspect = true;
        if (user.length == 0) {
            inspect = false;
            $("#tip-user").css("display", "block");
        } else {
            $("#tip-user").css("display", "none");
        }
        if (password.length == 0) {
            inspect = false;
            $("#tip-pwd").css("display", "block");
        } else {
            $("#tip-pwd").css("display", "none");
        }
        return inspect;
    }

    /**
     * 组装参数
     */
    function jsonParams(username,password) {
        var json = {
            "param":"signUp",
            "username":username,
            "password":password
        };
        return json;
    }

    /**
     * 隐藏显示加载框
     */
    function loading(hide) {
        if (hide) {
            $("#loading").css("display", "none");
        } else {
            $("#loading").css("display", "block");
        }
    }
    $("#tip-error").css("display","none");

</script>
</body>
</html>